<template>
  <div class="post-list" ref="postListRef" @scroll="handleScroll">
    <transition-group name="post-fade">
      <el-card v-for="post in displayedPosts" :key="post.postId" class="post-card" shadow="hover">
        <!-- 帖子头部 -->
        <FlowBorder>
          <div class="post-header">
            <el-avatar :src="post.avatar_url" :size="40" />
            <div class="post-author">
              <h4>{{ post.author }}</h4>
              <div class="post-meta">
                <span class="post-time">{{ post.created_at }}</span>
                <el-tag type="info" size="small" class="post-tag">
                  {{ post.tags }}
                </el-tag>
              </div>
            </div>
          </div>
        </FlowBorder>
        <!-- 帖子内容 -->
        <div class="post-body" @click="getPostDetail(post.postId)">
          <h3 class="post-title">{{ post.title }}</h3>
          <div class="post-contain">
            <p class="post-content singe-line" v-html="renderMarkdownWithImageSize(post.content)"></p>
            <img class="post-image" v-if="post.image_url" :src="post.image_url" />
          </div>
        </div>
        <!-- 互动按钮 -->
        <div class="post-footer">
          <div class="interaction-buttons">
            <el-button :class="{ liked: post.liked }" @click="handleLike(post)" text size="small">
              <component :is="ThumbsUp" class="icon" :style="post.is_liked ? 'color: #10b981' : ''" />
              {{ post.likes_count }}人点赞
            </el-button>
            <el-button text size="small">
              <component :is="MessageCircleMore" class="icon" />
              <div class="comment-count"> {{ post.comment_count }}</div>
            </el-button>
            <el-button v-shape="shareData" text size="small">
              <component :is="Share2" class="icon" />
              <span class="share-text">分享</span>
            </el-button>
          </div>
        </div>
      </el-card>
    </transition-group>

    <!-- 空状态页面 -->
    <div v-if="displayedPosts.length === 0 && !loading" class="empty-state">
      <el-icon :size="48" class="empty-icon">
        <component :is="FileText" />
      </el-icon>
      <p class="empty-text">暂无帖子，快去发布一条吧！</p>
    </div>

    <!-- 加载指示器 -->
    <div v-if="loading" class="loading-indicator">
      <el-icon class="is-loading" :size="20">
        <component :is="Loader2" class="icon" />
      </el-icon>
      <span>正在加载更多内容...</span>
    </div>
  </div>
</template>

<script setup>
import {
  Recycle,
  Sprout,
  ShoppingBag,
  Home,
  Search,
  PlusCircle,
  ThumbsUp,
  MessageCircle,
  Share2,
  Loader2,
  Flame,
  Circle,
  RefreshCw,
  ArrowLeft,
  MessageCircleMore,
  FileText // 新增空状态图标
} from 'lucide-vue-next'
import usePost from '../../hook/post'
import { ref, computed, onMounted, nextTick, h, getCurrentInstance, watchEffect, toRefs, toRef, watch, onBeforeUnmount } from 'vue'
import { defineProps, defineEmits } from 'vue'
import FlowBorder from '../../views/template.vue';
import MarkdownIt from 'markdown-it';
import { useStore } from '../../store/index'
import { ta } from 'element-plus/es/locales.mjs';
const store = useStore()
const { displayedPosts, searchQuery,tag, loadLock, loading, page, pageSize, user, loadPosts, handleLike } = usePost()
const showPostDetail = ref(false)
const selectedPost = ref({})
const comments = ref([])
const lastScrollTop = ref(0)
const postListRef = ref(null)
const markdown = new MarkdownIt()
const loadUser = ref(false)
const renderMarkdownWithImageSize = (content) => {
  const html = markdown.render(content);
  return html.replace(/<img/g, '<img style="display: none;"');
};
const shareData = {
  title: '我的网站',
  text: '看看这个有趣的内容',
  url: 'https://example.com'
}
const props = defineProps({
  searchQuery: String,
  tag: String
})
watch([() => props.searchQuery, () => props.tag, () => store.isUserList], ([newSearchQuery, newTag, isUserList], [oldSearchQuery, oldTag]) => {
  if (isUserList) {
    if (!loadUser.value) {
      displayedPosts.value = [];
      searchQuery.value = '';
      loadPosts(true);
      loadUser.value = true;
    }
  } else {
    if (newSearchQuery !== oldSearchQuery) {
      searchQuery.value = newSearchQuery;
      displayedPosts.value = [];
      loadUser.value = false;
      loadPosts();
    }
    if (newTag !== oldTag) {
      tag.value = newTag;
      displayedPosts.value = [];
      loadUser.value = false;
      searchQuery.value = '';
      loadPosts();
    }
  }
});
const emit = defineEmits(['post-selected'])
const getPostDetail = async (postId) => {
  emit('post-selected', postId)
}
const handleScroll = async (e) => {
  if (!postListRef.value || loading.value || loadLock.value) return
  const container = postListRef.value
  const currentScroll = container.scrollTop
  const isScrollingDown = currentScroll > lastScrollTop.value
  lastScrollTop.value = currentScroll
  const { scrollTop, scrollHeight, clientHeight } = container
  const shouldLoad = scrollHeight - (scrollTop + clientHeight) < 100
  if (isScrollingDown && shouldLoad && !loadLock.value) {
    console.log('加载更多帖子', page.value + 1)
    page.value++
    if (loadUser.value) {
      console.log('加载用户自己的帖子列表')
      await loadPosts(true)
    } else {
      await loadPosts()
    }
  }
}
onMounted(() => {
  loadPosts()
  if (postListRef.value) {
    console.log('滚动监听已设置')
  }
})
onBeforeUnmount(() => {
  console.log('组件销毁')
})
</script>

<style lang="scss" scoped>
$primary-color: #10b981;
$secondary-color: #3b82f6;
$text-color: #1f2937;
$border-color: #e5e7eb;
$background-color: #f8fafc;

.icon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  color: $text-color;
}

.post-list {
  height: 100%;
  display: grid;
  gap: 16px;
  overflow-y: auto;
  max-height: calc(100vh - 130px);
  padding: 12px;

  .post-card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }

    .post-header {
      display: flex;
      align-items: center;
      padding: 16px;
      gap: 12px;

      .post-author {
        h4 {
          margin: 0 0 4px 0;
          color: $text-color;
          font-size: 14px;
          font-weight: 600;
        }

        .post-meta {
          display: flex;
          align-items: center;
          gap: 6px;
        }

        .post-time {
          color: #6b7280;
          font-size: 12px;
        }
      }
    }

    .post-body {
      padding: 0 16px 16px;
      cursor: pointer;

      .post-title {
        color: $text-color;
        font-size: 16px;
        margin-bottom: 12px;
      }

      .post-content {
        color: #374151;
        line-height: 1.5;
        font-size: 14px;
        margin: 0;
      }

      .post-contain {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;

        .post-image {
          width: 180px;
          height: 140px;
          border-radius: 8px;
          object-fit: cover;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .post-content {
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
          color: #374151;
          line-height: 1.5;
          font-size: 14px;
          margin: 0;
        }
      }
    }

    .post-footer {
      padding: 12px 16px;
      border-top: 1px solid $border-color;

      .interaction-buttons {
        display: flex;
        gap: 8px;

        .el-button {
          padding: 6px 10px;
          border-radius: 6px;
          font-size: 12px;

          &:hover {
            background: rgba($primary-color, 0.05);
          }
        }

        .comment-count {
          position: relative;
          right: 6px;
          width: 12px;
          height: 12px;
        }
      }
    }
  }

  .empty-state {
    display: flex;
    margin-top: 20%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    text-align: center;

    .empty-icon {
      color: #9ca3af;
      margin-bottom: 16px;
    }

    .empty-text {
      color: #6b7280;
      font-size: 14px;
      margin: 0;
    }
  }
}

.loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  color: #6b7280;
  gap: 6px;
  font-size: 14px;
}

@media (max-width: 768px) {
  .post-list {
    gap: 12px;
    padding: 5px;

    .post-card {
      .post-header {
        padding: 12px;
        gap: 8px;

        .post-author {
          h4 {
            font-size: 14px;
          }

          .post-time {
            font-size: 11px;
          }
        }
      }

      .post-body {
        padding: 0 12px 12px;

        .post-title {
          font-size: 15px;
        }

        .post-content {
          font-size: 13px;
        }

        .post-contain {
          display: flex;
          flex-direction: column;
          gap: 12px;

          .post-image {
            width: 100%;
            height: 120px;
            border-radius: 8px;
            object-fit: cover;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          }

          .post-content {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            color: #374151;
            line-height: 1.5;
            font-size: 14px;
            margin: 0;
          }
        }
      }

      .post-footer {
        padding: 8px 12px;

        .interaction-buttons {
          gap: 6px;

          .el-button {
            padding: 4px 8px;
            font-size: 11px;
          }
        }
      }
    }

    .empty-state {
      padding: 20px 0;

      .empty-icon {
        font-size: 36px;
      }

      .empty-text {
        font-size: 13px;
      }
    }
  }
}
</style>